<template>
  <div id="home">
    <!-- 搜索框 -->
    <div class="search">
      <div class="hdc-head-logo">
        <img
          src="https://huaduocai.oss-cn-qingdao.aliyuncs.com/hdc_pc_images/logo.png"
          class="logo-images"
        />
      </div>
      <van-search
        style="width:300px;height:31px"
        placeholder="搜索鲜花，永生花，礼品"
        shape="round"
      ></van-search>
      <span class="login" color="red" @click="goto">登录</span>
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" :height="214">
      <van-swipe-item id="hu" v-for="(image, index) in images" :key="index">
        <img v-lazy="image" :height="214" />
      </van-swipe-item>
    </van-swipe>

    <!-- 一级分类 -->
    <van-grid :column-num="4" :border="false">
      <van-grid-item
        v-for="item in datas"
        :key="item.id"
        :text="item.text"
        @click="classify(item.id)"
      >
        <van-image :src="item.src" />
      </van-grid-item>
    </van-grid>
    <div class="tag">
      <span>人气首推</span>
    </div>

    <div class="list">
      <!-- 渲染列表 -->
      <div class="list_1" v-for="item in list_2" :key="item.text">
        <div class="list_2">
          <img :src="item.src" alt />
          <dl>
            <dt>{{item.text}}</dt>
            <dt>{{item.price}}</dt>
          </dl>
        </div>
      </div>
    </div>
    <!-- 送对象 -->
    <div class="sendlover">
      <div class="span1">送花对象</div>
      <div class="span2" @click="gotolist">更多》</div>
    </div>

    <!-- 送恋人 -->
    <div class="list">
      <!-- 渲染列表 -->
      <div class="list_1" v-for="item in list_1" :key="item.text">
        <div class="list_2">
          <img :src="item.src" alt />
          <!-- <dl id="text1">
            <dt>{{item.text}}</dt>
          </dl>-->
        </div>
      </div>
    </div>

    <div class="sendlover">
      <div class="span1">爱情鲜花</div>
      <div class="span2" @click="gotolist">更多》</div>
    </div>

    <div class="amor">
      <!--  渲染界面 -->
      <div class="amor_1" v-for="(item,index) in list_3" :key="index">
        <img
          :src="item.url"
          alt="item.title"
        />
        <div class="amor_2">
          <span class="span4">{{item.title}}</span>
          <span class="span5">{{item.price}}</span>
        </div>
      </div>
     
      
    </div>

    <div class="sendlover">
      <div class="span1">生日鲜花</div>
      <div class="span2">更多》</div>
    </div>
    <div class="amor">
      <!--  渲染界面 -->
      <div class="amor_1">
        <img
          src="https://cdn.huaduocai.net/Storage/Shop/1/GoodsPropertyValues/10451530519957669.jpg/300_300"
          alt="生日鲜花"
        />
        <div class="amor_2">
          <span class="span4">喜欢你</span>
          <span class="span5">￥169.00</span>
        </div>
      </div>
      <div class="amor_1"></div>
    </div>
    <div class="sendlover">
      <div class="span1">精品礼盒</div>
      <div class="span2">更多》</div>
    </div>
    <div class="amor">
      <!--  渲染界面 -->
      <div class="amor_1">
        <img
          src="https://cdn.huaduocai.net/Storage/Shop/1/GoodsPropertyValues/10439670784082898.jpg/300_300"
          alt="情话微甜"
        />
        <div class="amor_2">
          <span class="span4">情话微甜</span>
          <span class="span5">￥179.00</span>
        </div>
      </div>
      <div class="amor_1"></div>
    </div>
    <div class="sendlover">
      <div class="span1">开业花篮</div>
      <div class="span2">更多》</div>
    </div>
    <div class="amor">
      <!--  渲染界面 -->
      <div class="amor_1">
        <img
          src="https://cdn.huaduocai.net/Storage/Shop/1/Products/1165/1.png/300_300"
          alt="大红大紫一对"
        />
        <div class="amor_2">
          <span class="span4">大红大紫(一对)</span>
          <span class="span5">￥239.00</span>
        </div>
      </div>
      <div class="amor_1"></div>
    </div>
    <div class="nav">
      <img src="../image/nav.png" alt />
    </div>
    <div class="nav">
      <img src="../image/nav2.png" alt />
    </div>
    <div class="banner">
      <img src="../image/banner1.png" alt />
    </div>
    <div class="end">花语大全</div>
    <div class="flood">
      <span class="a">---- 客服热线:400-803-9638 ----</span>
      <span class="b">
        Copyright © 2007~2019
        花多彩(中国鲜花礼品网)
        版权所有
      </span>
      <span class="c">中国鲜花网领先品牌，鲜花速递专家！</span>
    </div>

    <div class="gb iconfont icon-huidaodingbu" @click="goback"></div>
  </div>
</template>
<script>
import "../assets//iconfont/font_1572866_n5ycsgvga6h/iconfont.css";
import "../assets//iconfont/font_1572866_n5ycsgvga6h/iconfont.js";
export default {
  data() {
    return {
      images: [require("../image/01.jpg"), require("../image/02.jpg")],
      datas: [
        {
          id: 1,
          src:
            "https://huaduocai.oss-cn-qingdao.aliyuncs.com/hdc_pc_images/quanbuxianhua.jpg",
          text: "全部鲜花"
        },
        {
          id: 2,
          src: "https://cdn.huaduocai.net/Storage/Shop/1/Tag/5/1.png",
          text: "花篮"
        },
        {
          id: 3,
          src: "https://cdn.huaduocai.net/Storage/Shop/1/Tag/6/1.png",
          text: "绿植"
        },
        {
          id: 4,
          src:
            "https://cdn.huaduocai.net/Storage/Shop/1/Tag/4/132528326006220673.jpg",
          text: "永生花"
        }
      ],
      list_1: [
        {
          src:
            "http://cdn.huaduocai.net/Storage/Shop/1/logo/9602835526844902.jpg",
          text: "送恋人"
        },
        {
          src:
            "http://cdn.huaduocai.net/Storage/Shop/1/logo/9602910973222929.jpg",
          text: "送朋友"
        },
        {
          src:
            "http://cdn.huaduocai.net/Storage/Shop/1/logo/9602917007070250.jpg",
          text: "送长辈"
        }
      ],
      list_2: [
        {
          src:
            "https://cdn.huaduocai.net/Storage/Shop/1/Products/7049/40120926086255.jpg/300_300",
          text: "最好的我们",
          price: "￥159.00"
        },
        {
          src:
            "https://cdn.huaduocai.net/Storage/Shop/1/GoodsPropertyValues/10453358321243729.jpg/300_300",
          text: "圣诞情怀",
          price: "￥289.00"
        },
        {
          src:
            "https://cdn.huaduocai.net/Storage/Shop/1/GoodsPropertyValues/10199683390776075.jpg/300_300",
          text: "火红的圣诞",
          price: "￥369.00"
        }
      ],
      list_3:[],
      list_4:[],
      list_5:[],
      list_6:[],

    };
  },
  methods: {
    goback(ev) {
      // 实现回到顶部效果
      console.log(ev.target);
      // window.scrollTo(0, 0);
      var scrollTop = window.scrollY;
      var timer = setInterval(function() {
        scrollTop -= 40; //匀速运动  每隔30毫秒前进20px
        if (scrollTop <= 0) {
          clearInterval(timer);
        }
        window.scrollTo(0, scrollTop);
      }, 30); //24帧 画面  1s看24个画面就比较连贯
    },
    goto() {
      this.$router.push("/login");
    },
    gotolist() {
      this.$router.push("/list");
    },

    // 主页数据渲染
    async classifydata(text) {
      let { data } = await this.$axios.get(
        `http://localhost:3000/list?text=${text}`
      );
      this.list_3 = data;
      window.console.log(this.list_3);
    }
  },
  created () {
    this.classifydata("Brand_zone");
  }
};
</script>


<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}
#home {
  width: vw(375);
  // height: vw(9999);
  background: #f2f2f2;

  .search {
    width: vw(375);
    height: vw(44);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #ffffff;
    .login {
      color: red;
      font-size: vw(16);
      font-weight: bold;
      margin-right: 9px;
      font-family: "黑体";
    }
  }
  #hu {
    img {
      width: vw(375);
      height: vw(223);
    }
  }
  .hdc-head-logo {
    img {
      width: vw(28);
      height: vw(28);
      //
    }
  }
  .tag {
    width: vw(375);
    height: vw(20);
    background: #ffffff;
    span {
      display: block;
      width: vw(64);
      height: vw(20);
      line-height: vw(20);
      text-align: center;
      background: red;
      color: #fff;
      font-weight: bold;
      font-size: vw(12);
      margin-left: vw(11);
    }
  }
  .list {
    width: vw(375);
    height: vw(125);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    .list_1 {
      width: vw(347);
      height: vw(125);
      // border: 1px solid red;
      .list_2 {
        display: inline-block;
        width: vw(115);
        height: vw(115);
        // border: 1px solid red;
        position: relative;
        img {
          width: vw(115);
          height: vw(115);
        }
        dl {
          width: vw(115);
          height: vw(48);
          // border: 1px solid red;
          position: absolute;
          bottom: vw(-16);
          background: rgba($color: #000000, $alpha: 0.3);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          dt {
            font-size: vw(14);
            color: #fff;
          }
        }
      }
    }
  }
  .sendlover {
    margin-top: vw(10);
    background: #ffffff;
    box-sizing: border-box;
    width: vw(375);
    height: vw(45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(0) vw(10);
    .span1 {
      font-size: vw(16);
      font-weight: bold;
    }
    .span2 {
      font-size: vw(13);
    }
  }
  #text1 {
    height: vw(30);
  }
  .amor {
    margin-top: vw(10);
    width: vw(375);
    display: flex;
    flex-wrap: wrap;

    .amor_1 {
      background: #ffffff;
      margin-left: vw(6);
      margin-bottom: vw(6);
      width: vw(179);
      height: vw(232);
      // border: 1px solid red;
      img {
        width: vw(179);
        height: vw(179);
      }
      .amor_2 {
        padding-left: vw(10);
        height: vw(53);
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .span4 {
          font-size: vw(13);
        }
        .span5 {
          font-size: vw(16);
          font-weight: bold;
          color: red;
        }
      }
    }
  }
  .nav {
    width: vw(375);
    height: vw(70);
    img {
      width: vw(375);
      height: vw(70);
    }
  }
  .banner {
    width: vw(375);
    height: vw(202);
    img {
      width: vw(375);
      height: vw(202);
    }
  }
  .end {
    background: #ffffff;
    width: vw(375);
    height: vw(44);
    line-height: vw(44);
    text-align: center;
    font-size: 15px;
    color: rgb(98, 96, 96);
  }
  .flood {
    margin-bottom: vw(50);
    width: vw(375);
    height: vw(95);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .a {
      color: red;
      font-size: vw(10);
    }
    .b,
    .c {
      color: gray;
      font-size: vw(12);
    }
  }
  .gb {
    width: vw(45);
    height: vw(45);
    border-radius: 50%;
    background: #ffffff;
    position: fixed;
    bottom: vw(120);
    right: vw(20);
    text-align: center;
    line-height: vw(45);
    color: #58bc58;
    font-size: vw(18);
  }
}
</style>